import React, { PureComponent, Component } from "react"
import ReactEcharts from "echarts-for-react"
import echarts from "echarts"
import { observer, inject } from "mobx-react"
import { toJS } from "mobx"
import styles from "./index.less"

@inject("ScreenStore")
@observer
class TrendChart extends Component {
  constructor(props) {
    super(props)

    this.store = this.props.ScreenStore
  }
  getOption = (data, result, title) => {
    return {
      grid: {
        left: "5%",
        right: "6%",
        top: "20%",
        containLabel: true,
      },
      title: {
        text: title,
        left: "center",
        textStyle: {
          color: "#65c6e7",
          fontSize: "16",
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "#65c6e7",
          margin: 18,
          fontSize: 14,
        },
        axisTick: {
          length: 5,
          lineStyle: {
            color: "#65c6e7",
          },
        },
        data: data.times || [],
      },
      yAxis: {
        type: "value",
        axisLabel: {
          color: "#65c6e7",
          formatter: `{value}`,
          fontSize: 14,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(101,198,231,0.3)",
          },
        },
      },
      tooltip: {
        trigger: "axis",
        textStyle: { fontSize: 16 },
        // formatter: (params, ticket, callback) => {
        //   let title = ""
        //   const result = params.map((item) => {
        //     title = `${item.axisValue}<br />`
        //     return `${item.seriesName}：${item.value}`
        //   })
        //   return title + result.join("<br />")
        // },
        backgroundColor: "#02db72",
        // axisPointer: {
        //   type: "cross",
        //   label: {
        //     backgroundColor: "#0592f4",
        //   },
        // },
      },
      dataZoom: [
        {
          show: true,
          realtime: true,
          start: 0,
          end: 100,
          textStyle: { color: "#65c6e7" },
          borderColor: "#00beff",
          fillerColor: "rgba(0,186,255,0.2)",
        },
        {
          type: "inside",
          realtime: true,
          start: 0,
          end: 100,
        },
      ],
      color: [
        "#ff4243",
        "#f39845",
        "#f6d54a",
        "#42dcf8",
        "#45aef0",
        "#4579f3",
        "#5244f9",
        "#ad47f1",
        "#f942f2",
        "#f9458f",
        "#fd6c6d",
      ],
      legend: {
        data: result.map((item) => {
          return item.name
        }),
        textStyle: { color: "#fff" },
        top: "10%",
      },
      series: result.map((item, index) => {
        return {
          name: item.name || "",
          data: item.value || [],
          type: "line",
          symbol: "circle",
          symbolSize: 6,
        }
      }),
    }
  }
  componentDidMount() {}

  render() {
    const { loadChart, field } = this.store
    if (!(loadChart.data && loadChart.data[0])) {
      return <div style={{ minHeight: "400px" }} />
    }
    const result = loadChart.data.reduce(
      (result, value, key) => {
        return {
          load: [
            ...result.load,
            { name: `${value.name}(电流)` || "", value: value.load },
          ],
          currents: [
            ...result.currents,
            { name: `${value.name}(负载)` || "", value: value.currents },
          ],
        }
      },
      { load: [], currents: [] }
    )
    return (
      <div>
        <div className={styles["down-period-title"]}>
          <span className={styles["text"]}>负载详情</span>
          <span className={styles["one"]} />
          <span className={styles["two"]} />
          <span className={styles["three"]} />
          <span className={styles["four"]} />
        </div>
        <ReactEcharts
          ref={(e) => {
            this.echarts_react = e
          }}
          style={{ height: "500px", padding: "0px 20px 40px" }}
          option={this.getOption(loadChart, result.load, "近24小时负载趋势图")}
        />
        <div className={styles["down-period-title"]}>
          <span className={styles["text"]}>电流详情</span>
          <span className={styles["one"]} />
          <span className={styles["two"]} />
          <span className={styles["three"]} />
          <span className={styles["four"]} />
        </div>
        <ReactEcharts
          ref={(e) => {
            this.echarts_react = e
          }}
          style={{ height: "500px", padding: "0px 20px 40px" }}
          option={this.getOption(
            loadChart,
            result.currents,
            "近24小时电流趋势图"
          )}
        />
      </div>
    )
  }
}

export default TrendChart
